<template>
  <view>
    <view class="product-window " :class="attr.cartAttr === true ? 'on' : ''">

      <div class="head">
        <div class="head-title">型号选择</div>
        <div class="del" @click="closeAttr">
          <image class="del-icon" src="https://cos.aitshirt.cn/app-icon/del.png" />
        </div>
      </div>

      <view class="textpic acea-row row-between-wrapper">
        <view class="pictrue">
          <image @tap="previewImage" :src="attr.productSelect.image" class="image" mode="aspectFit" />
        </view>
        <view class="text">
          <view class="money font-color-red" v-if="!isIntegral">
            ￥
            <text class="num">{{ attr.productSelect.price }}</text>
            <text class="stock">库存: {{ attr.productSelect.stock }}</text>
          </view>
          <view class="money font-color-red" v-if="isIntegral">
            <text class="num">{{ attr.productSelect.integral }}积分</text>
            <text class="stock">库存: {{ attr.productSelect.stock }}</text>
          </view>
          <view class="select-txt">
            已选：
            <text v-for="(item, index) in getCheckedValue()" :key="index">
              {{ item }}
            </text>
          </view>
          <view class="carnum acea-row row-left">
            <view
              class="item reduce"
              :class="cartNum <= 1 ? 'on' : ''"
              @click="CartNumDes"
            >-</view
            >
            <view class="item num">{{ cartNum }}</view>
            <view
              class="item plus"
              :class="cartNum >= attr.productSelect.stock ? 'on' : ''"
              @click="CartNumAdd"
            >+</view
            >
          </view>
        </view>
        <view class="iconfont icon-guanbi" @click="closeAttr"></view>
      </view>
      <view class="productWinList">
        <view
          class="item"
          v-for="(item, indexw) in attr.productAttr"
          :key="indexw"
        >
          <view class="title">{{ item.attrName }}</view>
          <view class="listn acea-row row-middle">
            <view
              class="itemn"
              :class="item.index == indexn ? 'on' : ''"
              v-for="(itemn, indexn) in item.attrValue"
              @click="tapAttr(indexw, indexn)"
              :key="indexn"
              >{{ itemn.attr }}</view
            >
          </view>
        </view>
      </view>
      <view class="bottom-btns">
        <div class="txt">购买即可拥有素材使用权，不可编辑或商用。</div>
        <view class="btn-group">
          <view class="btn" @click="addCart()">加入购物车</view>
          <view class="btn pay" @click="addPay()">立即购买</view>
        </view>
      </view>
    </view>
    <view
      class="mask"
      @touchmove.prevent
      :hidden="attr.cartAttr === false"
      @click="closeAttr"
    ></view>
  </view>
</template>
<script>
export default {
  name: "ProductWindow",
  props: {
    isIntegral:Boolean,
    attr: {
      type: Object,
      default: () => {
        cartAttr: true
      },
    },
    cartNum: {
      type: Number,
      default: () => 1,
    },
  },
  data: function () {
    return {};
  },
  mounted: function () {
	  // console.log(this.attr)
    // console.log(this);
  },
  watch: {
    attr(nextAttr) {
    },
  },
  methods: {
    closeAttr: function () {
      this.$emit("changeFun", { action: "changeattr", value: false });
    },
    CartNumDes: function () {
      this.$emit("changeFun", { action: "ChangeCartNum", value: false });
    },
    CartNumAdd: function () {
      this.$emit("changeFun", { action: "ChangeCartNum", value: 1 });
    },
    tapAttr: function (indexw, indexn) {
      // 修改商品规格不生效的原因：
      // H5端下面写法，attr更新，但是除H5外其他端不支持，
      // 尽量避免下面的骚写法，不要在子组件内更新props
      // 这里修改是为了能获取到被选中的属性
      this.attr.productAttr[indexw].index = indexn;
      let that = this;
      let value = that.getCheckedValue().sort().join(",");
      that.$emit("changeFun", {
        action: "ChangeAttr",
        value: {
          value,
          indexw,
          indexn,
        },
      });
    },
    //获取被选中属性；
    getCheckedValue: function () {
      let productAttr = this.attr.productAttr;
      let value = [];
      for (let i = 0; i < productAttr.length; i++) {
        for (let j = 0; j < productAttr[i].attrValueArr.length; j++) {
          if (productAttr[i].index === j) {
            value.push(productAttr[i].attrValueArr[j]);
          }
        }
      }
      return value;
    },
    previewImage() {
      uni.previewImage({
        current: 0,
        urls: [this.attr.productSelect.image],
      });
    },

    addCart() {
      console.log('addCart', 'sssssssssssssssssss')
      this.$emit("changeFun", { action: "joinCart", value: 1 });
    },
    addPay() {
      this.$emit("changeFun", { action: "tapBuy", value: 1 });
    }
  },
};
</script>

<style lang="less" scoped>

.product-window  .carnum {
  height: 0.54 * 100rpx;
  margin-top: 0.24 * 100rpx;
}

.product-window .carnum .item {
  border: 1px solid #a4a4a4;
  width: 0.84 * 100rpx;
  text-align: center;
  height: 100%;
  line-height: 0.54 * 100rpx;
  color: #a4a4a4;
  font-size: 0.45 * 100rpx;
}

.product-window .carnum .reduce {
  border-right: 0;
  border-radius: 0.06 * 100rpx 0 0 0.06 * 100rpx;
  line-height: 0.48 * 100rpx;
}

.product-window  .carnum .reduce.on {
  border-color: #e3e3e3;
  color: #dedede;
}

.product-window  .carnum .plus {
  border-left: 0;
  border-radius: 0 0.06 * 100rpx 0.06 * 100rpx 0;
  line-height: 0.46 * 100rpx;
}

.product-window .carnum .plus.on {
  border-color: #e3e3e3;
  color: #dedede;
}

.product-window .carnum .num {
  color: #282828;
  font-size: 0.28 * 100rpx;
}


.stock {
  color: #F25A27 !important;
}

.select-txt {
  font-weight: 400;
  font-size: 24rpx;
  color: #666666;
  line-height: 32rpx;
  margin: 8rpx 0;
}

.product-window {
  padding-bottom: 0rpx !important;
  .textpic {
    margin-top: 0rpx !important;
  }
}
.productWinList {
  .title {
    font-weight: bold;
    font-size: 28rpx;
    color: #222222  !important;
    line-height: 40rpx;
  }
  .listn {
    .itemn {
      width: 120rpx;
      height: 120rpx;
      line-height: 120rpx;
      background: #F3F7F8;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      text-align: center;
      border: none !important;
      color: #222222 !important;
      &.on {
        border: 2rpx solid #F25A27 !important;
        background: #F3F7F8 !important;
        color: #222222 !important;
      }
    }
  }
}

.bottom-btns {
  padding: 48rpx 32rpx;
  .txt {
    height: 32rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #6F6F6F;
    line-height: 32rpx;
    margin: 0 0 14rpx;
  }
  .btn-group {
    display: flex;
    align-items: center;
    gap: 14rpx;
    .btn {
      width: 217rpx;
      height: 72rpx;
      background: #F3F7F8;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
      line-height: 72rpx;
      text-align: center;
      &.pay {
        width: 454rpx;
        height: 72rpx;
        background: linear-gradient( 90deg, #F32F1A 0%, #F68A2D 100%);
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #FFFFFF;
      }
    }
  }
}

.head {
  position: relative;
  padding: 32rpx 0 0;
  .head-title {
    height: 42rpx;
    font-weight: bold;
    font-size: 32rpx;
    color: #222222;
    line-height: 42rpx;
    text-align: center;
  }
  .del {
    position: absolute;
    top: 32rpx;
    right: 32rpx;
    padding: 0 0 0 20rpx;
    .del-icon {
      width: 24rpx;
      height: 24rpx;
    }
  }
}
</style>
